<template>
    <el-dialog :model-value="props.visible" title="添加新工序" width="30%" @close="handleClose">
        <el-form ref="formRef" class="process-form" :model="formData" label-width="auto">
            <div class="form-content"> 
                <el-form-item label="工序名称" prop="workName">
                    <el-input v-model="formData.workName" placeholder="请输入"></el-input>
                </el-form-item>
                <!-- <el-form-item label="价格" prop="price">
                    <el-input style="width: 80%" v-model.number="formData.price" placeholder="请输入" type="number"></el-input>
                </el-form-item> -->
                <el-form-item label="计价方式" prop="unit">
                    <el-select v-model="formData.unit" placeholder="请选择" style="width: 100%">
                        <el-option v-for="item in props.pricing_manner" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                    <!-- <el-input style="width: 80%" v-model="formData.unit" placeholder="请输入"></el-input> -->
                </el-form-item>
                <el-form-item label="平均工期" prop="constructionPeriod">
                    <el-input v-model.number="formData.constructionPeriod" type="number" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="添加外协厂">
                    <el-select style="width: 100%" v-model="formData.supplyJoinWorkProcedures" multiple clearable filterable value-key="id" placeholder="请选择">
                        <el-option v-for="item in props.factorys" :key="item.id" :value="item" :label="item.companyName"></el-option>
                    </el-select>
                </el-form-item>
            </div>
        </el-form>
        <div class="factorys flex gap-2">
            <el-tag v-for="item in formData.supplyJoinWorkProcedures" :key="item.id">{{ item.companyName }}</el-tag>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button  type="primary" @click="handleClickSubmit" >确 定</el-button>
                <el-button @click="handleClose">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { Form } from '@/api/sj/purchaseManagement/processManagement/types';
import type { FormInstance } from 'element-plus';
import { editProcessApi } from '@/api/sj/purchaseManagement/processManagement/index';

const props = defineProps<{
    visible: boolean,
    formModel: any,
    factorys: any[],
    pricing_manner: any[]
}>();
const emits = defineEmits(['close','submit']);

const formRef = ref<FormInstance>();
const formData = ref<Form>({});

watch(()=>props.formModel, (newData)=>{
    formData.value = {...newData};
    const supplyJoinWorkProcedures = newData.supplyFactoryName.map((item: any)=>{
        return {
            id: item.id,
            companyName: item.company_name,
            sort: item.sort
        }
    })
    formData.value.supplyJoinWorkProcedures = supplyJoinWorkProcedures;
});

const handleClickSubmit = async () => {
    const factoryData = formData.value.supplyJoinWorkProcedures?.map((item: any, index: number)=>{
        return {
            supplyFactoriesId: item.id,
            sort: index + 1
        }
    });
    
    const submitData = {
        ...formData.value,
        supplyJoinWorkProcedures: factoryData,
        workStatus: 1
    }
    const { code } = await editProcessApi(submitData);
    if(code == 200){
        emits('submit', true);
        handleClose();
    }else{
        emits('submit', false);
    };
};

const handleClose = () => {
    formRef.value?.resetFields();
    emits('close');
};

</script>

<style lang="scss" scoped>
.process-form{
    width: 100%;
    display: flex;
    justify-content: center;
    .form-content{
        width: 70%;
    }
}
</style>